<template>
  <div>
    <div class="info_title">
      <h3>{{ seaTxt }}</h3>
      <span>共找到 {{ mvsList.length }}个mv</span>
    </div>
    <div>
      <el-tabs v-model="type">
        <el-tab-pane label="单曲" name="1">
          <song-list :isAlbum="true" :song-list="songList"></song-list>
        </el-tab-pane>
        <el-tab-pane label="歌手" name="100">
          <artist-list :artistList="artistList"></artist-list>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="1000">
          <music-list :musiclist="playList"></music-list>
        </el-tab-pane>
        <el-tab-pane label="专辑" name="10">
          <album-com :albumList="albumList"></album-com>
        </el-tab-pane>
        <el-tab-pane label="mv" name="1004">
          <mv-list :mv-list="mvsList"></mv-list>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { _Search } from '../network/search'
import { formatDate } from '../utils/tool'
import SongList from '../components/Songlist/song-list.vue'
import MusicList from '../components/Musiclist/Musiclist.vue'
import mvList from '../views/mv/childsComps/mv-list.vue'
import albumCom from './childComps/search-album.vue'
import artistList from './childComps/artist-list.vue'
export default {
  components: { SongList, MusicList, mvList, albumCom, artistList },
  created () {
    // 接受查询参数
    this.seaTxt = this.$route.params.searchTxt
    this.toSearch()
  },
  methods: {
    async toSearch () {
      // 接受查询参数
      this.seaTxt = this.$route.params.searchTxt
      console.log(this.seaTxt)
      var res = await _Search(this.seaTxt, Number(this.type))
      console.log(res)
      if (this.type == 1) {
        this.songList = []
        //整理歌曲的数据
        let list = res.data.result.songs
        let len = res.data.result.songs.length
        for (var i = 0; i < len; i++) {
          this.songList.push({
            id: list[i].id,
            name: list[i].name,
            arist: list[i].artists[0].name,
            album: list[i].album.name,
            time: formatDate(new Date(list[i].duration), 'mm:ss')
          })
        }
        console.log('---------', this.songList)
      } else if (this.type == '1000') {
        //整理歌单的数据
        this.playList = res.data.result.playlists
      } else if (this.type == '1004') {
        // mv数据
        this.mvsList = res.data.result.mvs
      } else if (this.type == '10') {
        // 专辑
        this.albumList = res.data.result.albums
      } else if (this.type == '100') {
        // 歌手
        this.artistList = res.data.result.artists
      }
    }
  },
  watch: {
    type () {
      //tab切换改变
      this.toSearch()
    },
    $route () {
      this.seaTxt = this.$route.params.searchTxt
      this.toSearch()
    }
  },
  data () {
    return {
      seaTxt: '', //传递的搜索关键字
      type: '1', //类型
      songList: [], //单曲
      playList: [], //歌单数据
      mvsList: [], //mv数据
      albumList: [], //专辑数据
      artistList: [] //歌手数据
    }
  }
}
</script>
<style lang="less"></style>
